<template>
  <div class="search-wrap" :style="{ width }">
    <div class="icon-wrap" @click="handleSearch">
      <van-icon name="search" />
    </div>
    <input ref="oInput" v-model.trim="inputValue" class="input-wrap" type="text" placeholder="请输入">
    <div class="search-btn" @click="handleSearch">搜索</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

  const props = defineProps({
    width: { type: String, default: '100%' }
  })

  const inputValue = ref(''); 
  const emit = defineEmits([ 'search' ]);
  
  const handleSearch = () => {
    emit('search', inputValue.value);
  }

  onMounted(() => {

  })

</script>

<style lang="scss" scoped>
  .search-wrap {
    display: flex;
    align-items: center;
    position: relative;
    height: 3.6rem;
    padding: 0 1rem;
    background: #fff;
    box-sizing: border-box;
    border-radius: 1.8rem;
    font-size: 1.4rem;
    color: #777;
    overflow: hidden;

    .icon-wrap {
      position: absolute;
      left: 1rem;
      font-size: 1.8rem;
      font-weight: bold;
    }

    .input-wrap {
      width: 100%;
      height: 100%;
      text-indent: 2rem;
      box-sizing: border-box;
    } 

    .search-btn {
      position: absolute;
      right: 1rem;
      padding: 0 1rem;
      border-left: .1rem solid #ccc;
      // border-radius: ;
      // background: #f1faf5;

    }
  }
</style>